<template>
	<div>
		<el-select
			v-if="showSelect"
			style="max-width:160px;margin-left:10px"
			ref="my-select"
			size="mini"
			v-model="label"
			@change="change"
		>
			<el-option label="全部组织" value=""></el-option>
			<el-option label="组织" value="1">
				<div style="height:100%">
					<el-tree
						:data="data"
						ref="treeBox"
						:highlight-current="true"
						node-key="id"
						:props="defaultProps"
						@node-click="handleNodeClick"
					></el-tree>
				</div>
			</el-option>
		</el-select>
	</div>
</template>
<script>
import { deepTree } from '@/cool/utils/index';
export default {
	props: ['value'],

	data() {
		return {
			label: '',
			value2: '',
			list: [],
			data: [],
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			showSelect: true
		};
	},

	watch: {
		// value() {
		// 	// this.value2 = this.value;
		// }
	},

	created() {
		this.refresh();
	},

	methods: {
		async refresh(params) {
			await this.$service.system.dept.list(params).then(res => {
				if (res.length === 0) {
					this.showSelect = false;
				} else {
					this.showSelect = true;
				}
				this.data = deepTree(res);
			});

			this.current('');
		},
		current(val) {
			this.$refs['treeBox'].setCurrentKey(val);
		},
		change(val) {
			this.current(null);
			this.$emit('change', val);
			this.$emit('input', val);
		},
		handleNodeClick(e) {
			// console.log(e);
			this.label = e.name;
			this.$emit('change', e.id);
			this.$emit('input', e.id);
			this.$refs['my-select'].blur();
		}
	}
};
</script>
<style lang="stylus" scoped>
.el-select-dropdown__item {
	height: 100%;
	background-color: #fff;
}
>>>.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
	color:red
}
.el-tree {
	color #4d4f5c
	font-weight 400
}
</style>
